import { useState, createContext } from 'react';
import { todoReducer } from './store';

import Form from './Form';
import List from './List';

//创建并导出孙组件需要的上下文对象
export const ListContext = createContext({});

function TodoList() {
  const [{ todoList, addCount, removeCount }, todoDispatch] = todoReducer();

  return (
    <div className="todo">
      <Form dispatch={todoDispatch} />
      {/* 在单支组件树情况下可以使用Provider将父组件的方法传递到孙组件中 */}
      <ListContext.Provider value={{ todoDispatch }}>
        <List
          addCount={addCount}
          removeCount={removeCount}
          todoList={todoList}
        />
      </ListContext.Provider>
    </div>
  );
}

export default TodoList;
